<template>
 <view-box style="background:#F3F6F7;">
  <div class="background-top">
    <div style="height:10px;"></div>
    <div class="main" v-if="userInfo" style="position: relative;">
      <div class="my-wid-left" v-if="identity === '1'"  @click="$router.push('/positionchange')">
        <div class="border-bottom-lk">
        <div class="work-job-lj">
          <div class="bac-img">
            <img style="width:66px;height:66px;" :src="userInfo.avatar" alt="">
            <div class="pos-my-sex" v-if="entrances.sex === 1"><i slot="icon" class="iconfont icon-baina_nan"></i></div>
            <div class="pos-my-pae" v-if="entrances.sex === 2"><i slot="icon" class="iconfont icon-baina_nv"></i></div>
          </div>
        </div>
        <div class="work-job-cl" style="display: flex;align-items: center;flex-wrap: wrap;padding-left: 10px;">
            <p class="job-pol-col" style="font-size:12px;color:#000000;width: 100%;white-space:nowrap;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{userInfo.account}}</p>
            <p class="job-pol-col" style="font-size:12px;color:#32B6C6;width: 100%;">ID :&nbsp;&nbsp;{{userInfo.id}}</p>
        </div>
        </div>
        <div class="wid-poio">
          <p style="font-size:13px;color:#BABABA;overflow: hidden;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">座右铭：{{entrances.motto}}</p>
        </div>
      </div>
      <div class="my-wid-left" v-if="identity === '2'"  @click="$router.push('/companyUpdata')">
        <div class="border-bottom-lk">
        <div class="work-job-lj">
          <div class="bac-img">
            <img style="width:66px;height:66px;" v-if="data === ''" :src="avatar" alt="">
            <img style="width:66px;height:66px;" v-if="data !== ''" :src="$apiUrl + '/storage/' + data.logo" alt="">
          </div>
        </div>
        <div class="work-job-cl" style="display: flex;align-items: center;flex-wrap: wrap;padding-left: 10px;">
            <p class="job-pol-col" style="font-size:12px;color:#32B6C6;width: 100%;" v-if="data === ''">暂无信息</p>
            <p class="job-pol-col" style="font-size:16px;color:#000000;width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-if="data !== ''">{{data.cname}}</p>
            <p class="job-pol-col" style="font-size:12px;color:#32B6C6;width: 100%;">ID :&nbsp;&nbsp;{{userInfo.id}}</p>
        </div>
        </div>
        <div class="wid-poio">
          <p style="font-size:12px;color:#32B6C6;padding-top: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-if="data !== ''">{{data.city}} | {{data.hangye}} | {{data.xingzhi}}</p>
           <p style="font-size:12px;color:#32B6C6;padding-top: 10px;" v-if="data === ''">暂无信息</p>
        </div>
      </div>
      <div class="my-wid-right">
        <div class="bor-pading-l" style="margin-top:0px;" v-if="identity === '1'" @click="$router.push('/myresume')">
          <p style="margin-left:10px;margin-right:10px;"><i slot="icon" style="color:#32B6C6;font-size:22px;" class="iconfont icon-jianli"></i></p>
          <p>我的简历</p>
        </div>
        <div class="bor-pading-l" style="margin-top:0px;" v-if="identity === '2'" @click="$router.push('/corporate')">
          <p style="margin-left:10px;margin-right:10px;"><i slot="icon" style="color:#32B6C6;font-size:22px;" class="iconfont icon-jianli"></i></p>
          <p>公司信息</p>
        </div>
        <div class="bor-pading-l" @click="$router.push('/joinVip')">
          <p style="margin-left:10px;margin-right:10px;"><i slot="icon" style="color:#32B6C6;font-size:22px;" class="iconfont icon-vip"></i></p>
          <p>我的VIP</p>
        </div>
        <div class="bor-pading-l" @click="$router.push('/privacy')" v-if="identity === '1'">
          <p style="margin-left:10px;margin-right:10px;"><i slot="icon" style="color:#32B6C6;font-size:22px;" class="iconfont icon-yinsi"></i></p>
          <p>隐私设置</p>
        </div>
         <div class="bor-pading-l" v-if="identity === '2'" @click="$router.push('/issue')">
          <p style="margin-left:10px;margin-right:10px;"><i slot="icon" style="color:#32B6C6;font-size:22px;" class="iconfont icon-fabuzhiwei"></i></p>
          <p>发布职位</p>
        </div>
      </div>
    </div>
      <flexbox class="border-nav">
          <flexbox-item style="margin-left:5px!important;">
              <a href="#/Workplacecredit">
              <div class="flex-demo" align="center">
                <i slot="icon" style="color:#4F7478;font-size:28px;" class="iconfont icon-xinyong"></i>
                <p style="font-size:12px;">职场信用</p>
              </div>
              </a>
          </flexbox-item>
          <flexbox-item>
            <div class="flex-demo" align="center" @click="$router.push('/whoLookMy')">
              <i slot="icon" style="color:#4F7478;font-size:28px;" class="iconfont icon-shuikanguowo"></i>
              <p style="font-size:12px;">谁看过我</p>
            </div>
          </flexbox-item>
          <flexbox-item>
            <a href="#/applyfortherecord">
            <div class="flex-demo" align="center">
              <i slot="icon" style="color:#4F7478;font-size:28px;" class="iconfont icon-toudihefabu"></i>
              <p style="font-size:12px;">投递记录</p>
            </div>
            </a>
          </flexbox-item>
          <flexbox-item>
              <div class="flex-demo" align="center" @click="$router.push('/invite')">
                <i slot="icon" style="color:#4F7478;font-size:28px;" class="iconfont icon-mianshi"></i>
                <p style="font-size:12px;">面试邀请</p>
              </div>
          </flexbox-item>
          <flexbox-item style="margin-right:5px!important;">
            <div class="flex-demo" align="center" @click="$router.push('/ifocuson')">
              <i slot="icon" style="color:#4F7478;font-size:28px;" class="iconfont icon-guanzhu1"></i>
              <p style="font-size:12px;">我关注的</p>
            </div>
          </flexbox-item>
      </flexbox>
      <div style="height:55px"></div>
  </div>
     <div style="background: #F3F6F7; padding-top: 0">
      <div style="height:35px;"></div>
       <div class="back-pom-ri">
        <div class="feng-klp" @click="$router.push('/myassessment')">
          <p>
            <i slot="icon" style="color:#32B6C6;font-size:22px;margin-left:10px;position: relative;top:2px;" class="iconfont icon-rencaipinggu"></i>
            <span>人才评测</span>
          </p>
          <p><i slot="icon" style="color:#666666;font-size:22px;margin-right:10px;" class="iconfont icon-jiantou"></i></p>
        </div>
        <div class="feng-klp" @click="$router.push('/changes')">
          <p>
            <i slot="icon" style="color:#32B6C6;font-size:22px;margin-left:10px;position: relative;top:2px;" class="iconfont icon-yijingpinggu"></i>
            <span>易经评测</span>
          </p>
          <p><i slot="icon" style="color:#666666;font-size:22px;margin-right:10px;" class="iconfont icon-jiantou"></i></p>
        </div>
      </div>

      <div class="back-pom-ri" style="margin-top:10px;" @click="$router.push('/collect')">
        <div class="feng-klp">
          <p>
            <i slot="icon" style="color:#32B6C6;font-size:22px;margin-left:10px;position: relative;top:2px;" class="iconfont icon-shoucang2"></i>
            <span>我的收藏</span>
          </p>
          <p><i slot="icon" style="color:#666666;font-size:22px;margin-right:10px;" class="iconfont icon-jiantou"></i></p>
        </div>
      </div>

       <div class="back-pom-ri" style="margin-top:10px;">
        <div class="feng-klp" @click="_affirm">
          <p>
            <i slot="icon" style="color:#32B6C6;font-size:22px;margin-left:10px;position: relative;top:2px;" class="iconfont icon-zhuanhuan"></i>
            <span>切换身份</span>
          </p>
          <p>
            <span style="font-size:15px;color:#bababa" v-if="identity === '1'">个人</span>
            <span style="font-size:15px;color:#bababa" v-if="identity === '2'">公司</span>
            <i slot="icon" style="color:#666666;font-size:22px;margin-right:10px;" class="iconfont icon-jiantou"></i>
          </p>
        </div>
      </div>
    <div class="pomhg">
      <confirm v-model="show"
        @on-confirm="onConfirm"
        @on-show="onShow"
        @on-hide="onHide">
        <p  v-if="identity === '2'" style="text-align:center;color:#32B6C6;">是否切换为个人用户</p>
        <p  v-if="identity === '1'" style="text-align:center;color:#32B6C6;">是否切换为公司用户</p>
      </confirm>
    </div>
     </div>
   <b-menu selected="myPage"></b-menu>

 </view-box>
</template>
<script>
import bMenu from '../components/bottom_menu'
import { ViewBox, Box, Flexbox, FlexboxItem, Group, Cell, CellBox, Confirm } from 'vux'
export default {
  components: {
    ViewBox,
    Box,
    Flexbox,
    Group,
    Cell,
    CellBox,
    FlexboxItem,
    bMenu,
    Confirm
  },
  data () {
    return {
      comseo: {
        identity: 0,
        motto: null,
        position: null,
        sex: 0
      },
      identity: 0,
      name: 'user',
      entrances: '',
      data: [],
      show: false,
      company_image: ''
    }
  },
  mounted () {
    this.myPrivac()
    this.entrance()
    this.identity = localStorage.getItem('identity')
    if (!this.$store.state.auth.userInfo) {
      this.$store.dispatch('getUserInfo')
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    },
    avatar () {
      if (!this.userInfo) {
        return null
      }
      if (this.userInfo.avatar.indexOf('http:') === -1) {
        return this.$apiUrl + '/storage/' + this.userInfo.avatar
      }
      return this.userInfo.avatar
    }
  },
  created () {
    if (this.$route.query.category != null) {
      this.category = parseInt(this.$route.query.category)
    }
  },
  methods: {
    myPrivac () {
      this.$http.get('/companyInfo').then(response => {
        this.data = response.data
        console.log(this.data)
        this.company_image = this.data.logo
      }).catch(error => {
        console.log(error)
      })
    },
    onConfirm (msg) {
      if (this.identity === '2') {
        this._postentrance(1)
      }
      if (this.identity === '1') {
        this._postentrance(2)
      }
    },
    onShow () {
      console.log('on show')
    },
    onHide () {
      console.log('on hide')
    },
    _affirm () {
      this.show = true
    },
    _postentrance (identityid) {
      console.log(identityid)
      this.$http.put('/entrance/up', {
        identity: identityid
      }).then((response) => {
        console.log(response)
        this._getuser()
      }).catch((errot) => {
        console.log(errot)
      })
    },
    entrance () {
      this.$http.post('/entrance').then(response => {
        this.entrances = response.data.data
      }).catch(error => {
        console.log(error)
      })
    },
    _getuser () {
      this.$http.post('/entrance').then(response => {
        this.comseo = response.data.data
        localStorage.setItem('identity', this.comseo.identity)
        console.log(this.comseo.identity)
        location.reload()
      }).catch(error => {
        console.log(error)
      })
    }
  }
}
</script>
<style scoped>
.pos-outo{
  position: absolute;
  top: 10px;
  right: 12px;
}
.background-top{
  margin: 0;
  padding: 0;
  background: #B0E3D8;
  height: auto;
  position: relative;
}
.main{
  width: 92%;
  margin-left: 4%;
  display: flex;
}
.border-cons{
  border: 1px solid #ffa6a6;
  width: 176px;
  border-radius: 13.0392px;
  padding: 2px 8px;
}

.flex-demo{
  line-height: 50px;
  margin-bottom: 14.4px;
  height: auto;
}
.flex-demo img{
  width: 30px;
  height: 30px;
}
.flex-demo p{
  line-height: 0px;
  font-size: 13px;
}
.border-nav{
  border: 1px solid #ebebeb;
  width: 92%;
  margin-left: 4%;
  border-radius: 7.2px;
  box-shadow: 0px 0px 2px 0px #f3f3f3;
  background: #fff;
  position: absolute;
  bottom: -25px;
}
.border-nav a{
  color: #000;
}
.my-wid-left{
  width: 60%;
  background: #fff;
  border-radius: 7px;
}
.border-bottom-lk{
  display: flex;
  border-bottom: 1px solid #E6E6E6;
  width: 92%;
  margin-left: 4%;
}
.my-wid-right{
  width: 40%;
}
.wid-poio{
  width: 92%;
  margin-left: 4%;
  padding-top: 5px;
  padding-bottom: 5px;
}
.bac-img{
position: relative;
color: #ff0000;
font-weight: 600;
width:90%;
margin: 5%;
}
.bac-img img{
  background: #FFD7D7;
  border-radius: 50%;
}
.pos-my-pae{
  position: absolute;
  height: 25px;
  width: 25px;
  background: #F8849C;
  border-radius: 100%;
  line-height: 25px;
  text-align: center;
  color: #fff;
  top: 45px;
  right: -5px;
}
.pos-my-sex{
  position: absolute;
  height: 25px;
  width: 25px;
  background: #32B6C6;
  border-radius: 100%;
  line-height: 25px;
  text-align: center;
  color: #fff;
  top: 45px;
  right: -5px;
}
.bor-pading-l{
  width: 96%;
  background: #fff;
  border-radius: 7px;
  display: flex;
  margin-top: 10px;
  height: 37px;
  line-height: 37px;
  margin-left: 4%;
}
.back-pom-ri{
  background: #fff;
  width: 92%;
  margin-left: 4%;
  border-radius: 7px;
}
.feng-klp{
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
}
</style>
<style>
.pomhg .weui-dialog__btn_primary {
    color: #fff!important;
    background: #32B6C6!important;
}
.pomhg .weui-dialog__btn_default {
  color: #fff!important;
  background:#E6E6E6!important;
}
    .vux-label{
      font-size: 12.25px !important;
    }
    .weui-cell__ft{
      font-size: 12px;
    }
    .vux-label {
    font-size: 15px !important;
}
    .weui-cell_access{font-size:13px;}
    .vux-no-group-title{margin-top: 1.25em !important;}
    .weui-cell_access.vux-cell-box {
        padding-right: 13px;
        position: relative;
        font-size: 15px;
    }
</style>